<template>
	<view class="expense-detail">
		<view class="expense-detail-box">
			<view class="top">
				<view class="icon-box">
					<icon-svg icon-class="feiji2" style="color:#F7A80B ;"></icon-svg>
				</view>
				<view class="conetnt-box">
					<text style="font-size: 35rpx;">机票费</text>
				</view>
			</view>
			<view class="center">
				<form class="handFormBox" @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item" v-for="(item, index) in formList" :key="index">
						<view>
							<view class="title">
								<text v-if="item.required" class="required">*</text>
							{{item.title}}:</view>
							<view class="item-body" style="position: relative;">
								<view style="position: absolute;width: 100%;height: 100%;z-index:2" @click="" v-if="item.isDate" @click="popupTime">

								</view>
								<input class="uni-input" v-model="item.value" :name="item.name" :placeholder="item.placeholder" style="height: 100%;" />
							</view>
						</view>
					</view>
				</form>
			</view>
			<view class="addInvoice">
				<view class="addInvoice-line1">
					<!-- <text @click="popup">添加发票</text> -->
					<navigator url="/pages/add/personTicket/personTicket"><text>添加发票</text></navigator>
				</view>
				<view class="addInvoice-line2">
					一键导入发票
				</view>
				<view class="addInvoice-line3">
					对接商旅平台
				</view>
			</view>

			<!-- 			<view class="footer" style="margin-bottom: 200rpx;">
				<view style="width: 100%;">
					<text class="title">附件:</text>
					<view class="accessory-box">
						<text style="text-align: left;color:#ccc;font-size: 32rpx;">(选填)</text>
						<text style="text-align: right;color:#33B6C6;">上传附件</text>
					</view>
				</view>
			</view> -->
			<view class="attachment">
				<text style="display: block;">附件:</text>
				<image src="/static/planeBill.png" mode="aspectFit" @tap="_previewImage('/static/planeBill.png')" class="img" v-if="showAttachment" />
				<view class="upload">
					<text>上传附件</text>
				</view>

			</view>
			<view class="op">
				<view class="left-box">
					<icon-svg icon-class="tianjia"></icon-svg>
					<text>再记一笔</text>
				</view>
				<view class="button-box" @click="save">
					<button>保存</button>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popup-item" v-for="item in popupData" :key="item.name">
					<icon-svg :icon-class="item.icon" style="margin-right: 20rpx;" /><text>{{item.name}}</text>
				</view>
				<view class="cancel popup-item" @click="popupCancel">
					取消
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupDate" type="bottom">
			<view class="pickerContainer">
				<!-- picker-view组件按钮 -->
				<view class="pickerBtn" v-if="showPicker">
					<view class="cancle" @click="pickerCancleDate">取消</view>
					<view class="confirm" @click="pickerConfirm">确定</view>
				</view>
				<picker-view v-if="showPicker" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	 
	const date = new Date()
	const years = []
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}

	export default {
		
		data() {
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				showPicker: 'true',
				formList: [{
						'title': '摘要',
						'placeholder': '',
						'name': 'input',
						'value': '',
						'required':true
					}, {
						'title': '收支项目',
						'placeholder': '',
						'name': 'input',
						'value': '机票费',
						'required':true
					}, {
						'title': '报销金额',
						'placeholder': '',
						'name': 'input',
						'value': ''
					}, {
						'title': '出发地',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
					{
						'title': '到达地',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
					{
						'title': '日期',
						'placeholder': '',
						'name': 'input',
						'value': '',
						'isDate': true,
						'required':true
					},
					{
						'title': '发票类型',
						'placeholder': '',
						'name': 'input',
						'value': '航空客票'
					},
					{
						'title': '电子客票号码',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
					{
						'title': '不含税金额',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
					{
						'title': '税额',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
					{
						'title': '含税金额',
						'placeholder': '',
						'name': 'input',
						'value': ''
					},
				],
				popupData: [{
						icon: 'saoyisao',
						name: '扫描发票'
					}, {
						icon: 'dingdan',
						name: '发票照片'
					}, {
						icon: 'luru-xianxing',
						name: '手录发票'
					},
					{
						icon: 'weixin',
						name: '微信发票'
					}
				],
				showAttachment: false

			};
		},
		methods: {
			popup() {
				this.$refs.popup.open()
			},
			popupCancel() {
				this.$refs.popup.close()
			},
			popupTime() {
				this.$refs.popupDate.open()
			},
			pickerCancleDate() {
				this.$refs.popupDate.close();

			},
			pickerConfirm() {
				this.$set(this.formList, 5, {
					'title': '日期',
					'placeholder': '',
					'name': 'input',
					'value': `${this.year}-${this.month}-${this.day}`,
					'isDate': true
				})

				this.$refs.popupDate.close()
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			save() {
				let money=this.formList[2].value
				setTimeout(function(){
					uni.$emit('saveTicket', [{
						icon: 'feiji4',
						type: '机票费',
						time: '2020-12-22',
						money,
					}])
				},50)
				
				
				getApp().globalData.status='已报销'
				uni.navigateTo({
					url:'./index'
				})
			}
		},
		onLoad() {
			uni.$on('ticketSelected', data => {
				this.showAttachment = true
				this.formList = [{
						'title': '摘要',
						'placeholder': '',
						'name': 'input',
						'value': '',
						'required':true
					}, {
						'title': '收支项目',
						'placeholder': '',
						'name': 'input',
						'value': '机票费',
						'required':true
					}, {
						'title': '报销金额',
						'placeholder': '',
						'name': 'input',
						'value': ''
					}, {
						'title': '出发地',
						'placeholder': '',
						'name': 'input',
						'value': '上海浦东'
					},
					{
						'title': '到达地',
						'placeholder': '',
						'name': 'input',
						'value': '广州'
					},
					{
						'title': '日期',
						'placeholder': '',
						'name': 'input',
						'value': '2020-12-22',
						'isDate': true,
						'required':true
					},
					{
						'title': '发票类型',
						'placeholder': '',
						'name': 'input',
						'value': '航空客票'
					},
					{
						'title': '电子客票号码',
						'placeholder': '',
						'name': 'input',
						'value': '784-2442237949'
					},
					{
						'title': '不含税金额',
						'placeholder': '',
						'name': 'input',
						'value': '834.86'
					},
					{
						'title': '税额',
						'placeholder': '',
						'name': 'input',
						'value': '75.14'
					},
					{
						'title': '含税金额',
						'placeholder': '',
						'name': 'input',
						'value': '910.00'
					}
				]
			})
		},

	}
</script>


<style lang="scss" scoped>
	.expense-detail {
		position: relative;

		.expense-detail-box {
			position: absolute;
			top: 40rpx;
			left: 0;
			right: 0;

			.top,
			.center,
			.footer {
				margin-top: 40rpx;
				padding: 40rpx 20rpx;
				// line-height: 90px;
				// height: 90px;
				background: #fff;
				display: flex;
			}

			.op {
				line-height: 100rpx;
				height: 100rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				display: flex;

				.left-box {
					width: 60%;
					text-align: center;
					color: $themeColor;

					.svg-icon {
						color: $themeColor;
					}

					text {
						margin-left: 20rpx;
					}
				}

				.button-box {
					width: 40%;

					button {
						background: $themeColor;
						color: #fff;
						width: 100%;
						height: 100%;
					}
				}
			}

			.top {
				.conetnt-box {
					margin-left: 20rpx;

					text {
						display: block;
					}
				}
			}

			.center {
				.handFormBox {
					width: 100%;

					.uni-form-item {
						// padding:10rpx 0;
						color: #595959;
						font-size: 34rpx;
						border-bottom: 1px solid #EEEEEE;

						.title {
							padding: 5rpx 0;
							.required{
									color: red;
							}
						}
					}
				}
			}

			.footer {
				.title {
					color: #ccc;
					font-size: 34rpx;
				}

				.accessory-box {
					margin-top: 20rpx;

					text {
						width: 50%;
						display: inline-block;

					}
				}
			}
		}

		.costReason {
			height: 200rpx;
		}

		.addInvoice {
			background-color: white;
			height: 200rpx;
			line-height: 60rpx;
			color: $themeColor;
			text-align: center;

			.addInvoice-line2 {
				border-top: 1rpx solid $uni-text-color-grey;
				margin-top: 30rpx;
				font-size: 40rpx;
			}

			.addInvoice-line3 {
				line-height: 20rpx;
				font-size: 20rpx;
				color: $uni-text-color-grey;
			}
		}

		.popup-item {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			background-color: white;
			border-bottom: 1rpx solid $underline;
			text-align: center;
		}

		.cancel {
			background-color: white;
			color: $uni-text-color-grey;
		}

		.item-body {
			height: 80rpx;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.picker-item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 0%;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.pickerBtn {
		width: 100%;
		height: 101rpx;
		line-height: 101rpx;
		background-color: #fff;
		font-size: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #ADB0A7;

		.cancle {
			color: #0076FF;
			padding-left: 40rpx;
			box-sizing: border-box;
		}

		.confirm {
			color: #FE4533;
			padding-right: 40rpx;
			box-sizing: border-box;
		}
	}

	.pickerContainer {
		background-color: white;
	}

	.attachment {
		padding: 30rpx;
		margin-top: 30rpx;
		margin-bottom: 200rpx;
		background-color: white;

		.img {
			display: block;
			margin: 0 auto;
		}
	}
	.upload{
		text-align: right;
		color: $themeColor;
	}
</style>
